<template>
	<div>
		<navigationBar :backType="2" navigationTitle="佣金流水" />

		<dateScreen />

		<view class="wrap safe-area">
			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="item">
						<view class="title"> 上门保洁-2小时开荒保姐 </view>

						<view class="subItem flex align-center f-26">
							<text class="text"> 服务师: </text>
							<text class="value"> 术超 </text>
						</view>

						<view class="subItem flex align-center f-26">
							<text class="text"> 下单人: </text>
							<text class="value"> 岳良坤 </text>
						</view>

						<view class="subItem flex align-center f-26">
							<text class="text"> 下单时间: </text>
							<text class="value"> 2024-05-12 12:12:15 </text>
						</view>

						<view class="price f-36"> ¥120.00 </view>
					</view>
				</block>
			</view>
		</view>
	</div>
</template>

<script>
	import dateScreen from "@/subPages/components/dateScreen/dateScreen.vue";
	export default {
		components: {
			dateScreen,
		},
		data() {
			return {
				list: [, , , , , , , , ,],
			};
		},
		methods: {},
	};
</script>

<style lang="scss" scoped>
	.wrap-list {
		padding: 0 20rpx;
		overflow: hidden;
		width: 100%;
		box-sizing: border-box;

		.item {
			width: 100%;
			overflow: hidden;
			background-color: white;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 1;

			.title {
				color: $title-color;
			}

			.subItem {
				margin-top: 30rpx;
				width: 100%;

				.text {
					color: $title-color;
				}
				.value {
					margin-left: 10rpx;
					color: #b0b0b0;
				}
			}

			.price {
				position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translateY(-50%);
				color: $price-color;
			}
		}
	}
</style>
